<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb"
           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
           v-if="showCollapse">
        <i class="icon-navicon"
           @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">



      <!--      <div class="top-bar__item top-bar__item&#45;&#45;show"-->
      <!--           v-if="showMenu">-->
      <!--        <top-menu ref="topMenu"></top-menu>-->
      <!--      </div>-->
      <!--      <span class="top-bar__item"-->
      <!--            v-if="showSearch">-->
      <!--        <top-search></top-search>-->
      <!--      </span>-->
      <div class="top-bar__item" style="display: flex; align-items: center">
        <offer-bar></offer-bar>
      </div>

    </div>
    <div class="top-bar__right">
      <!--      在线客服-->
      <el-tooltip v-if="showLock"
                  effect="dark"
                  :content="$t('navbar.online')"
                  placement="top-start">
        <el-image src="/img/bg/online.PNG" @click="openAIHelp" style="height: 50px;width: 50px; position: fixed;bottom: 30px;right:30px;z-index: 9999;"></el-image>
      </el-tooltip>
      <el-tooltip v-if="showLock"
                  effect="dark"
                  placement="bottom">
        <div class="top-bar__item">
          <el-button round size="mini" ><a href="http://business.adsbeetles.com/login" target="_blank" > 切换至新版</a></el-button>
        </div>
      </el-tooltip>
      <!--      FAQ-->
      <el-tooltip v-if="showLock"
                  effect="dark"
                  :content="$t('navbar.faq')"
                  placement="top-start">
        <el-image onclick="window.open('https://aihelp.net/FAQ/#/Ads4each/account/en/E0905E776B7AADEB') " src="/img/bg/FAQ.svg" style="height: 25px;width: 25px;" ></el-image>
      </el-tooltip>
<!--      <iframe v-show="faq" id='aihelp-support-frame' src='https://aihelp.net/FAQ/#/Ads4each/account/en/E0905E776B7AADEB'  style="position: fixed;top: 60px;right:150px;z-index: 9999;" width='70%' height='60%'  frameborder='0'></iframe>-->

      <!--      <el-tooltip v-if="showColor"-->
      <!--                  effect="dark"-->
      <!--                  :content="$t('navbar.color')"-->
      <!--                  placement="bottom">-->
      <!--        <div class="top-bar__item">-->
      <!--          <top-color></top-color>-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
      <!--      <el-tooltip v-if="showDebug"-->
      <!--                  effect="dark"-->
      <!--                  :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"-->
      <!--                  placement="bottom">-->
      <!--        <div class="top-bar__item">-->
      <!--          <top-logs></top-logs>-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
      <el-tooltip v-if="showLock"
                  effect="dark"
                  :content="$t('navbar.lock')"
                  placement="bottom">
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip>
      <!--      <el-tooltip v-if="showTheme"-->
      <!--                  effect="dark"-->
      <!--                  :content="$t('navbar.theme')"-->
      <!--                  placement="bottom">-->
      <!--        <div class="top-bar__item top-bar__item&#45;&#45;show">-->
      <!--          <top-theme></top-theme>-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
      <el-tooltip effect="dark"
                  :content="$t('navbar.notice')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark"
                  :content="$t('navbar.language')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip>
      <el-tooltip v-if="showFullScren"
                  effect="dark"
                  :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                  placement="bottom">
        <div class="top-bar__item ">
          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
             @click="handleScreen"></i>
        </div>
      </el-tooltip>
      <img class="top-bar__img"
           :src="userInfo.avatar">
      <div  class="el-dropdown menu-info" style="font-size: 14px">
        <span>{{rolesName}} {{userInfo.account}}</span>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfo.userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <div @click.stop.prevent.self="redirect('/')">
              {{$t('navbar.dashboard')}}
            </div>
            <!--            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>-->
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click.stop.prevent.self="redirect('/info/index')">
              {{$t('navbar.userinfo')}}
            </div>
            <!--            <router-link :to="{path:'/info/index'}" >{{$t('navbar.userinfo')}}</router-link>-->
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout"
                            divided>{{$t('navbar.logOut')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>
<script>
import  {resetRouter} from '@/router/router'
import {getRoles} from "@/api/user"
import {mapGetters, mapState } from "vuex";
import {fullscreenToggel, listenfullscreen,setTheme} from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topNotice from './top-notice'
import topLang from "./top-lang";
import offerBar from "@/views/offer/offerBar"


export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topNotice,
    topLang,
    offerBar
  },
  name: "top",
  data() {
    return {
      faq:false,
      rolesName : '',
    };
  },
  filters: {},
  created() {
    // window.AIHelpSupport.show()
    let roles = this.userInfo.role_name.split(',')
    let rolesList = []
    getRoles().then(res=>{
      res.data.data.map(item =>{
        roles.map(it =>{
          if(item.value === it){
            rolesList.push(item.label)
          }
        })
      })
      this.rolesName = rolesList.join(' ')
    })
  },
  mounted() {
    this.AihelpFunction()
    setTheme('theme-white')
    listenfullscreen(this.setScreen)

  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor,
    }),
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag",
    ])
  },
  methods: {
    AihelpFunction(){
      let  userConfig = {
        userId: this.$store.getters.userInfo.user_id,
        userName:this.$store.getters.userInfo.user_name,
        userTags: '',
        customData: {
          key1: 'value1',
          key2: 'value2',
        },
      };
      let supportConfig = {
        conversationIntent: 1,
        alwaysShowHumanSupportButtonInBotPage: true,
        welcomeMessage: '',
      };
      let initConfig = {
        appKey: 'ADS4EACH_app_872fcf884f0547e8ad04128e0e0245c3',
        domain: 'ads4each.aihelp.net',
        appId: 'ads4each_platform_7f5e2797f15d942a632c3700339c68c6',
        appName: ' Ads4each',
        // language: 'THIS IS YOUR DEFAULT LANGUAGE(OPTIONAL)',
        supportMode: 'showConversation',
        supportConfig: supportConfig,
        userConfig: userConfig,
      };
      if (typeof AIHelpSupport !== undefined) {
        AIHelpSupport.init(initConfig);
      }
    },
    // showFaq(){
    //   this.faq=!this.faq
    // },
    openAIHelp() {
      AIHelpSupport.show();
      // alert('aaa')
    },
    redirect(link){
      this.$router.push({path:link})
    },
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.options.routes = []
          this.$router.push({path: "/login"});
        });
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.menu-info{
  font-size: 14px !important;
  padding: 0 20px 0 0 !important;

}
.menu-info:hover{

}
</style>

